<?php
    $this->layout('base.phtml', [
        'title' => _('Login & security'),
        'canonical' => url_full('security'),
        'current_page' => 'security',
        'has_errors' => $error || $errors,
    ]);
?>

<div class="section section--small section--longbottom">
    <div class="section__title">
        <h1><?= _('Login & security') ?></h1>
    </div>

    <p class="section__intro">
        <?= _('You can change your login details here.') ?>
    </p>

    <form method="post" action="<?= url('update security') ?>">
        <?= $this->include('alerts/_error.phtml', ['message' => $error]) ?>

        <input type="hidden" name="csrf" value="<?= csrf_token() ?>" />

        <div class="form-group <?= isset($errors['email']) ? 'form-group--invalid' : '' ?>">
            <label for="email">
                <?= _('Your email address') ?>
            </label>

            <input
                id="email"
                name="email"
                type="email"
                value="<?= $email ?>"
                required
                aria-describedby="email-desc"
            />

            <div id="email-desc">
                <?php if (isset($errors['email'])): ?>
                    <p class="form-group__error">
                        <span class="sr-only"><?= _('Error') ?></span>
                        <?= $errors['email'] ?>
                    </p>
                <?php endif; ?>
            </div>
        </div>

        <div class="form-group <?= isset($errors['password_hash']) ? 'form-group--invalid' : '' ?>">
            <label for="new-password">
                <?= _('New password') ?>
                <span class="label__help">
                    <?= _('(optional)') ?>
                </span>
            </label>

            <div class="form-group__stack" data-controller="input-password">
                <input
                    id="new-password"
                    name="password"
                    type="password"
                    data-input-password-target="input"
                    autocomplete="new-password"
                    aria-describedby="new-password-desc"
                />

                <button
                    type="button"
                    class="no-mobile js-only"
                    data-action="input-password#toggle"
                    data-input-password-target="button"
                    aria-label="<?= _('Show password as plain text. Note: this will visually expose your password.') ?>"
                >
                    <?= icon('eye') ?>
                    <?= _('Show') ?>
                </button>
            </div>

            <div id="new-password-desc">
                <?php if (isset($errors['password_hash'])): ?>
                    <p class="form-group__error">
                        <span class="sr-only"><?= _('Error') ?></span>
                        <?= $errors['password_hash'] ?>
                    </p>
                <?php endif; ?>

                <p class="form-group__caption">
                    <?= _('Leave this field empty if you want to keep your current password.') ?>
                </p>
            </div>
        </div>

        <div class="form__actions">
            <button type="submit" class="button--primary">
                <?= _('Save changes') ?>
            </button>
        </div>
    </form>
</div>
